<template>
  <div class="Cluster">
<!--    <div class="head">-->
<!--      <img src="@/image/fanhui.png" @click="toBack" />-->
<!--      <div class="xs">-->
<!--        &lt;!&ndash;<div>X</div>&ndash;&gt;-->
<!--      </div>-->
<!--      <div class="head_text">商品详情</div>-->
<!--      <div class="fx">-->
<!--        <img src="@/image/fenxiang.png" />-->
<!--      </div>-->
<!--    </div>-->

    <van-nav-bar
      title="商品详情"
      left-text=""
      right-text="分享"
      left-arrow
      @click-left="toBack"
      @click-right="share('weixin')"
    />


    <!-- 轮播图 -->
    <van-swipe
      :loop="true"
      :width="375"
      :height="375"
      :autoplay="3000"
      indicator-color="white"
    >
<!--      <van-swipe-item>-->
<!--        <img-->
<!--          src="https://images.pexels.com/photos/934718/pexels-photo-934718.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"-->
<!--          alt=""-->
<!--      /></van-swipe-item>-->

      <van-swipe-item v-for="(image, index) in imageurl" :key="index">
        <img width="375" height="375" v-lazy="image.picUrl" />
      </van-swipe-item>

    </van-swipe>
    <div class="center_text">
      <div class="left_text">
        <div class="left_name">{{product.productName}}</div>
        <div class="left_much" v-if="product.price != null && product.price != ''">￥{{product.price}}</div>
        <div class="left_much" v-if="product.price == null || product.price == ''">{{product.price}}</div>
        <div class="xl">销量:{{this.xiaoliangshu}}</div>
<!--        <div class="yh">店铺优惠卷</div>-->
      </div>
      <div class="right_text">
        <div class="fenxiang">
      <span></span>
<!--          <div style="margin-left:305px;font-size:12px">分享</div>-->
          <div class="lj">已购买用户</div>

        </div>
      </div>
    </div>
    <div class="solid"></div>
    <div class="dp">

      <div v-for="item in joinList">
        <van-divider />
        <!--<div style="border:1px solid #000">-->
          <van-row>

            <van-col span="8">
              <van-image
                round
                width="2rem"
                height="2rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              {{item.jointOne}}</van-col>
            <!--<van-col span="4"></van-col>-->
            <van-col span="8">
              <span style="font-size: 1rem">
                还差1人拼成
              </span>
            </van-col>
            <van-col span="8">
              <van-button type="danger" @click="pintuan(item.jointId)">去拼团</van-button>
              </van-col>
          </van-row>
        <!--</div>-->
      </div>

      <!--<van-popup closeable close-icon="close" v-model="showpintuan" :style="{ height: '25%',width: '70%' }">-->
        <!--内容-->
      <!--</van-popup>-->

      <!--<div class="img_tx">-->
        <!--<img src="@/image/meinv.jpg" alt="" />-->
        <!--<div class="dp_text">石家庄金易陶瓷砖官方旗舰店</div>-->
      <!--</div>-->
      <!--<div class="bao_img">-->
        <!--<img src="@/image/bao.png" alt="" />-->
        <!--<div class="bao_text">1.8km</div>-->
      <!--</div>-->
      <!--<div class="jdgg">进店逛逛</div>-->
    </div>

    <div class="solid"></div>
    <div class="fahuo">
      <div class="fh_text">
        <div class="fahuo_text">
         <span>发货&nbsp&nbsp{{ address }}</span>
<!--          &nbsp|&nbsp快递:&nbsp10.00-->

        </div>
        <div>
          <img src="@/image/jinru.png" alt="" />
        </div>
      </div>
      <div class="dizhi">

<!--        <div class="dizhi_text">配送至:石家庄&nbsp桥西区&nbsp红旗大街</div>-->
      </div>

    </div>
    <div class="solid"></div>
    <div class="fh">
      <div class="yx_text">
<!--        <div class="yx">已选</div>-->
<!--        <div class="xg">选择规格</div>-->
        <div class="jr">

        </div>
      </div>
      <div class="yx_fw" @click="toShop">
        <div class="yx_text">
          <div class="yx">
            <span style="float: left">服务</span>
            <img src="@/image/jinru.png" alt="" style="width:15px;height:15px;float: right;margin-top: 10px" />
          </div>
<!--          <div class="xg">其他字段</div>-->
        </div>
      </div>
    </div>
    <div class="solid"></div>
    <van-tabs >
      <van-tab title="商品介绍" class="cpxx" >
        <div class="xiangqing">
<!--          <h3>{{product.descript}}</h3>-->
          <div v-html="product.descript"></div>
          <br/><br/><br/><br/><br/>
          <!--砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人；就我就离开刚进入jge如果未来，将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为；服务金溶解污垢喷，雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污，垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服，务金溶解污垢喷雾剂欧；派微结构两个人就我就离开刚；进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人，就我就离开刚进入jge如，果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离，开刚进入jge如果未来将-->
        </div>
      </van-tab>
<!--      <van-tab title="商品评价" class="shangppj"-->
<!--        >商品评价-->
<!--        <div class="shangpinpingjia">-->
<!--          砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人；就我就离开刚进入jge如果未来，将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为；服务金溶解污垢喷，雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污，垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服，务金溶解污垢喷雾剂欧；派微结构两个人就我就离开刚；进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人，就我就离开刚进入jge如，果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离，开刚进入jge如果未来将-->
<!--        </div>-->
<!--      </van-tab>-->
    </van-tabs>







    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="联系电话" dot >
        <a :href="'tel:' + product.phoneNumber" rel="external nofollow" ><span style="color: black">联系电话</span>  </a>
      </van-goods-action-icon>
      <van-goods-action-icon @click="gouwuche" icon="cart-o" text="购物车"/>
      <van-goods-action-icon @click="toShop" icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="单独购买" @click="purchase" />
      <van-goods-action-button type="danger" text="拼团购买" @click="ptpurchase" />
    </van-goods-action>


    <van-sku
      align="left"
      v-model="show"
      :sku="sku"
      :goods="goods_info"
      :goods-id="goods_id"
      :hide-stock="sku.hide_stock"
      :quota="quota"
      :quota-used="quota_used"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="initialSku"
      disable-stepper-input
      :close-on-click-overlay="closeOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="onBuyClicked"
      :show-add-cart-btn="false"
      buy-text="确认"/>  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->


    <van-sku
      align="left"
      v-model="csshow"
      :sku="cssku"
      :goods="csgoods_info"
      :goods-id="csgoods_id"
      :hide-stock="cssku.hide_stock"
      :quota="csquota"
      :quota-used="csquota_used"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="csinitialSku"
      disable-stepper-input
      :close-on-click-overlay="cscloseOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="csonBuyClicked"
      :show-add-cart-btn="false"
      buy-text="确认"/>  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->




    <van-sku
      align="left"
      v-model="qptshow"
      :sku="qptsku"
      :goods="qptgoods_info"
      :goods-id="qptgoods_id"
      :hide-stock="qptsku.hide_stock"
      :quota="qptquota"
      :quota-used="qptquota_used"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="qptinitialSku"
      disable-stepper-input
      :close-on-click-overlay="qptcloseOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="qptonBuyClicked"
      :show-add-cart-btn="false"
      buy-text="确认"/>  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->






  </div>
</template>
<script>

  import { GroupfindAllList,GroupfindAllById } from "@/api/commodity/group";
  import { selectProductById,selectProductLableByProId,selectSupplierCoupon,selectPpiUrl,xiaoliang } from '@/api/commodity/shop_product.js'

  import { jointlistJointById } from "@/api/commodity/joint";

  export default {

  name: "Cluster",
  data() {
    return {
      address: '',
      buttons: [{
        title: '我的好友',
        extra: {
          scene: 'WXSceneSession'
        }
      },
        {
          title: '朋友圈',
          extra: {
            scene: 'WXSceneTimeline'
          }
        },
      ],
      imageurl:[],
      closeOnClickOverlay: true,  //点击空白处关闭购物框
      cscloseOnClickOverlay: true,  //点击空白处关闭购物框
      qptcloseOnClickOverlay: true,  //点击空白处关闭购物框
      show: false,
      qptshow: false,
      csshow: false,
      showpintuan:false,
      showCar: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '规格',
            k_s: 's1',
            v: [],
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: '',  //？？
        stock_num: null, // 商品总库存？？
        none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },

      cssku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '规格',
            k_s: 's1',
            v: [],
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: '',  //？？
        stock_num: null, // 商品总库存？？
        none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },



      qptsku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '规格',
            k_s: 's1',
            v: [],
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: '',  //？？
        stock_num: null, // 商品总库存？？
        none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },



      initialSku:{
        // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
        // 值：skuValueId（规格值 id）
        s1: '1',
        // 初始选中数量
        selectedNum: 1,
      },
      csinitialSku:{
        // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
        // 值：skuValueId（规格值 id）
        s1: '1',
        // 初始选中数量
        selectedNum: 1,
      },



      qptinitialSku:{
        // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
        // 值：skuValueId（规格值 id）
        s1: '1',
        // 初始选中数量
        selectedNum: 1,
      },

      jointId:null,

      goods_id: '',
      csgoods_id: '',
      qptgoods_id: '',
      // quota: 1, //限购数量 库存旁边显示限购数
      // csquota: 1, //限购数量 库存旁边显示限购数
      // qptquota: 1, //限购数量 库存旁边显示限购数
      quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      csquota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      qptquota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      goods_info: {
        title: '',
        picture:''  //图片这个我有点混乱
      },
      csgoods_info: {
        title: '',
        picture:''  //图片这个我有点混乱
      },



      qptgoods_info: {
        title: '',
        picture:''  //图片这个我有点混乱
      },



      showBase: true,    //sku的框的显示

xiaoliangshu:'',
      supplierId: Number,

      joinList:[],
      productId: Number,
      product: Object,
      // show: false,
      liList: [
        {
          id: 0,
          num: 0
        }
      ]
    };
  },
    mounted() {
      if(window.plus) {
        this.updateSerivces();
      }
    },
  created(){
    var id = parseInt(this.$route.query.productId);
    this.productId = id;
    const productId = this.$route.query && this.$route.query.productId;
    console.log("====="+productId)
    this.findAllById(productId);

    this.jointJointById(productId);
  },


  methods: {

    /**
     * 获取微信分享通道
     */
    updateSerivces() {
      let _this = this;
      plus.share.getServices(function (s) {
        _this.shares = {};
        for (var i in s) {
          var t = s[i];
          _this.shares[t.id] = t;
        }
        _this.sweixin = _this.shares['weixin'];
        _this.sqq = _this.shares['qq'];
        _this.sinaweibo = _this.shares['sinaweibo'];
      }, function (e) {
        plus.nativeUI.alert('获取分享服务列表失败：' + e.message);
      });
    },
    //第三方分享
    share(a) {
      let _this = this;

      if(a == 'weixin'){
        let msg = {
          type: 'web', //分享的内容的类型
          title: '淘小建自建房平台美图太赞了,分享给你',
          content: this.product.productName,
          thumbs: [this.product.picUrlAl],
          href: 'http://51jhf.com/txj/#/commodity_details?commodityId='+this.productId,
          extra: {
            scene: "WXSceneSession"
          } // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
        }
        plus.nativeUI.actionSheet({
          title: '分享到微信',
          cancel: '取消',
          buttons: _this.buttons,
        }, function (e) {
          (e.index > 0) && _this.sharePage(_this.sweixin, msg, _this.buttons[e.index - 1]);
        })
      }
    },

    /**
     * 触发分享
     */
    sharePage(srv, msg, button) {
      let _this = this;
      // plus.nativeUI.alert('分享操作：');
      if (!srv) {
        plus.nativeUI.alert('无效的分享服务！');
        return;
      }
      button && (msg.extra = button.extra);
      // 发送分享
      if (srv.authenticated) {
        // plus.nativeUI.alert('---已授权---');
        _this.doShare(srv, msg);
      } else {
        // plus.nativeUI.alert('---未授权---');
        srv.authorize(function () {
          _this.doShare(srv, msg);
        }, function (e) {
          plus.nativeUI.alert('认证授权失败：' + JSON.stringify(e));
        });
      }
    },
    /**
     * 开始分享
     */
    doShare(srv, msg) {
      let _this = this;
      srv.send(msg, function () {
        plus.nativeUI.alert('分享到"' + srv.description + '"成功！');
      }, function (e) {
        plus.nativeUI.alert('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));
      });
    },

    toShop(){
      this.$router.push({path:"/shop_home",query:{shopId:this.supplierId}});
    },


    gouwuche(){
      this.$router.push({path:"/ShoppingCart"});
    },
    // 参加 别人的拼团

    pintuan(jointId){
      this.jointId =jointId;
      // console.log("************aaa*******"+aaa)
      this.qptshow = true;
      this.qptsku.tree = [
        {
          k: '规格',
          k_s: 's1',
          v: [],
        },
      ];
      selectProductLableByProId(this.productId).then((res) =>{
        for (let i = 0; i < res.data.data.length; i++){
        this.qptsku.tree[0].v.push({ "id": res.data.data[i].labelId,"name":res.data.data[i].labelName,"imgUrl":res.data.data[i].productPicInfo.picUrl});
        this.qptsku.list.push({ "id": null,"price":(res.data.data[i].groupPrice)*100,"discount":null,
          "s1":res.data.data[i].labelId,"stock_num":parseInt(res.data.data[i].labelQuantity),"goods_id":res.data.data[i].productId});
        this.qptgoods_id = res.data.data[i].productId;
        this.qptsku.stock_num += parseInt(res.data.data[i].labelQuantity);

      }
      // console.log(this.sku.tree);
      // console.log(res.data);
    });
    },


    jointJointById(productId){
      jointlistJointById(productId).then(res=>{
        this.joinList = res.data.data;
      })
    },


    // 拼团购买

    ptpurchase(){
      this.csshow = true;

      this.cssku.tree = [
        {
          k: '规格',
          k_s: 's1',
          v: [],
        },
      ];
      selectProductLableByProId(this.productId).then((res) =>{
        for (let i = 0; i < res.data.data.length; i++){

        this.cssku.tree[0].v.push({ "id": res.data.data[i].labelId,"name":res.data.data[i].labelName,"imgUrl":res.data.data[i].productPicInfo.picUrl});
        this.cssku.list.push({ "id": null,"price":(res.data.data[i].groupPrice)*100,"discount":null,
          "s1":res.data.data[i].labelId,"stock_num":parseInt(res.data.data[i].labelQuantity),"csgoods_id":res.data.data[i].productId});
        this.csgoods_id = res.data.data[i].productId;
        this.cssku.stock_num += parseInt(res.data.data[i].labelQuantity);
      }

      // console.log(this.sku.tree);
      // console.log(res.data);
    });

    },


    // 单独购买

    purchase(){
      this.show = true;
      this.sku.tree = [
        {
          k: '规格',
          k_s: 's1',
          v: [],
        },
      ];
      selectProductLableByProId(this.productId).then((res) =>{
        for (let i = 0; i < res.data.data.length; i++){
        this.sku.tree[0].v.push({ "id": res.data.data[i].labelId,"name":res.data.data[i].labelName,"imgUrl":res.data.data[i].productPicInfo.picUrl});
        this.sku.list.push({ "id": null,"price":(res.data.data[i].labelPrice)*100,"discount":null,
          "s1":res.data.data[i].labelId,"stock_num":parseInt(res.data.data[i].labelQuantity),"goods_id":res.data.data[i].productId});
        this.goods_id = res.data.data[i].productId;
        this.sku.stock_num += parseInt(res.data.data[i].labelQuantity);

      }
      // console.log(this.sku.tree);
      // console.log(res.data);
    });
    },

    customSkuValidator(){

    },
    onBuyClicked(sku) {
      // console.log(JSON.stringify(sku.selectedNum));
      this.$router.push({
        path:"/OrderDetails",
        query:{
          skuId: sku.selectedSkuComb.s1,
          productId:this.product.productId,
          selectedNum:sku.selectedNum,
          supplierId:this.supplierId
        },

      });
      // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
    },

    qptonBuyClicked(qptsku) {
      // console.log(JSON.stringify(sku.selectedNum));
      this.$router.push({
        path:"/Altwo",
        query:{
          skuId: qptsku.selectedSkuComb.s1,
          productId:this.product.productId,
          selectedNum:qptsku.selectedNum,
          jointId:this.jointId,
          supplierId:this.supplierId
        }
      });
      // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
    },



    csonBuyClicked(cssku){
      // console.log(JSON.stringify(sku.selectedNum));
      this.$router.push({
        path:"/Alone",
        query:{
          skuId: cssku.selectedSkuComb.s1,
          productId:this.product.productId,
          selectedNum:cssku.selectedNum,
          supplierId:this.supplierId
        }
      });
      // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});

    },








    findAllById(productId){
      xiaoliang(productId).then(res=>{
        this.xiaoliangshu = res.data.data
      })

      selectPpiUrl(productId).then(res=>{
        this.imageurl = res.data.data;
      })

      selectProductById(productId).then(res=>{
        this.product = res.data.data;
        this.supplierId= res.data.data.supplierId;
        this.goods_info.picture= res.data.data.picUrlAl
        this.csgoods_info.picture= res.data.data.picUrlAl
        this.qptgoods_info.picture= res.data.data.picUrlAl
        this.address= res.data.data.address
      })
    },

    showPopup() {
      this.show = true;
    },
    cuts: function(idx) {
      if (this.liList[idx].num < 1) return;
      this.liList[idx].num--;
      this.total--;
    },
    add: function(idx) {
      this.liList[idx].num++;
      this.total++;
    },

    // toBack() {
    //   this.$router.go(-1); //返回上一层
    // },
    // msp() {
    //   this.$router.push({
    //     path: "/Cluster"
    //   });
    // },
    toBack() {
      this.$router.go(-1); //返回上一层
    },
    goumai() {
      this.$router.push({
        path: "/Alone"
      });
    },





  }
};
</script>
<style scoped>
.head {
  width: 100%;
  height: 44px;
  display: flex;
  /* position: fixed; */
  /* background-color: aqua; */
}
.head img {
  width: 20px;
  height: 18px;
  float: left;
  margin-top: 13px;
  color: #080808 10000%;
}
.head .xs {
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 44px;
  margin-left: 15px;
}
.head .head_text {
  font-size: 18px;
  color: #222222 10000%;
  text-align: center;
  line-height: 44px;
  margin-left: 20px;
}
.fx img {
  width: 20px;
  height: 20px;
  margin-left: 200px;
}
.van-swipe-item img {
  width: 100%;
  height: 414px;
}
.img img {
  width: 100%;
}
.center_text {
  width: 100%;
  height: 90px;
  /* background-color: aqua; */
}
.left_text {
  width: 202px;
  height: 120px;
  overflow: hidden;
   /*background-color: pink;*/
}
.left_name {
  font-size: 14px;
  margin-top: 20px;
  margin-left: -10px;
}
.left_much {
  font-size: 20px;
  float: left;
  margin-left: 30px;
  margin-top: 10px;
  color: #101010 10000%;
}
.xl {
  margin-top: 10px;
  font-size: 14px;
}
.yh {
  left: 20px;
  top: 580px;
  width: 85px;
  height: 22px;
  line-height: 20px;
  border-radius: 5px;
  background-color: rgba(253, 243, 241, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(194, 73, 76, 72);
  margin-top: 15px;
  margin-left: 30px;
  color: pink;
  line-height: 22px;
}
.fenxiang img {
  width: 20px;
  height: 20px;
  margin-left: 330px;
  margin-top: -100px;
  color: #c8af7f;
}
.fenxiang span{
  float: left;
}
.lj {
  font-size: 14px;
  float: left;
  margin-top: -1.5rem;
  padding: 0 1rem;
}
.solid {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}
.dp {
  width: 100%;
  height: 50px;
  /* background-color: powderblue; */
}
.img_tx {
  width: 100%;
  height: 55px;
  overflow: hidden;
  /* background-color: purple; */
}
.img_tx img {
  width: 49px;
  height: 49px;
  margin-left: 20px;
  border-radius: 50%;
  margin-top: 5px;
  /* background-color: purple; */
}
.dp_text {
  margin-top: -45px;
  float: left;
  margin-left: 75px;
  font-size: 15px;
}
.bao_img img {
  width: 19px;
  height: 19px;
  margin-top: -20px;
  margin-left: 73px;
}
.bao_text {
  margin-top: -18px;
  float: left;
  margin-left: 95px;
}
.jdgg {
  width: 85px;
  height: 25px;
  line-height: 25px;
  border-radius: 10px;
  background-color: rgba(200, 175, 127, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.4);
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 100);
  float: right;
  margin-right: 10px;
  margin-top: -45px;
  color: white;
}
.hd {
  /* margin-top: 20px; */
  width: 100%;
  height: 176px;
  /* display: flex; */
  margin-top: -80px;
  /* background-color: purple; */
}
.fh {
  width: 100%;
  height: 76px;

  /* background-color: pink; */
}
.fh .yx_text {
  width: 100%;
  height: 30px;
  /* background-color: powderblue; */
}
.yx_text .yx {

  margin-left: 20px;
  color: #717070;
  line-height: 30px;
  font-family: PingFangSC-bold;
}
.yx_text .xg {
  float: left;
  line-height: 30px;
  margin-left: 20px;
  color: rgba(102, 102, 102, 100);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.yx_text .jr {
  float: right;
  line-height: 30px;
}
.fh .yx_fw {
  width: 100%;
  height: 30px;
  /* margin-top: 20px; */
  /* background-color: red; */
  margin: 10px auto;
}
.fahuo {

  height: 62px;
  font-size: 14px;
   /*background-color: red;*/
}
.fh_text {
  height: 30px;
  /* float: left; */
  /* background-color: pink;*/
}
.fh_text span{
  float: left;
}
.fh_text .fahuo_text {
  float: left;
  margin-left: 20px;
}
.dizhi {
  width: 100%;
  height: 30px;
  /* background-color: peru; */
}
.dizhi .dizhi_text {
  float: left;
  margin-left: 20px;
}
.fahuo img {
  width: 15px;
  height: 15px;
  float: right;
  margin-top: 5px;
  color: gray;
}
.cpxx {
  /*margin-left: -130px;*/
  color: black;
  font-size: 16px;
}
.xiangqing {
  /*width: 300px;*/
  /*height: 400px;*/
  /*margin-left: 170px;*/
  /*font-size: 12px;*/
  text-align: left;
  /*margin-top: 20px;*/

  /* background-color: pink; */
}
.shangppj {
  margin-left: -130px;
  color: black;
  font-size: 16px;
}
.shangpinpingjia {
  width: 300px;
  margin-top: 20px;
  height: 400px;
  margin-left: 170px;
  font-size: 12px;
  text-align: left;
}
.tabbar {
  width: 100%;
  height: 55px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
}
.iphone {
  line-height: 20px;
  /* margin-left: 10px; */
}
.iphone img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: 10px;
}
.car {
  line-height: 20px;
  margin-left: 10px;
}
.car img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: 7px;
}
.shop {
  line-height: 20px;
  margin-left: 10px;
}
.shop img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: 3px;
}
.alone {
  left: 164px;
  top: 1438px;
  width: 120px;
  height: 56px;
  margin-left: 5px;
  border-radius: 20px 0px 0px 20px;
  background-color: rgba(164, 110, 74, 100);
  text-align: center;
}
.group {
  left: 289px;
  top: 1438px;
  width: 120px;
  height: 56px;
  border-radius: 0px 20px 20px 0px;
  background-color: rgba(195, 155, 115, 100);
  text-align: center;
}
.money {
  line-height: 20px;
  margin-top: 10px;
  font-size: 14px;
}
.ddgm {
  line-height: 20px;
  font-size: 14px;
}
.yes {
  font-size: 16px;
  width: 370px;
  height: 42px;
  line-height: 42px;
  border-radius: 25px;
  background-color: rgba(195, 155, 115, 100);
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 100);
  margin-top: 50px;
}

.cut {
  width: 37px;
  height: 35px;
  margin-left: 150px;
  margin-top: 15px;
}
.add {
  width: 37px;
  height: 35px;
}
.guige1:hover {
  background-color: #f86902;
  color: rgba(164, 110, 74, 100);
}
.details {
  width: 100%;
  height: 130px;
  display: flex;
  overflow: hidden;
  margin-top: 20px;
  /* background-color: pink; */
}
.img {
  display: flex;
  width: 115px;
  height: 115px;
}
.much {
  margin-left: 10px;
  font-size: 18px;
  color: rgba(16, 16, 16, 100);
}
.kucun {
  display: flex;
  font-size: 14px;
  margin-top: 30px;
  margin-left: -40px;
  color: gray;
}
.gg {
  margin-top: 55px;
  font-size: 14px;
  margin-left: -67px;
}
.solid {
  width: 100%;
  height: 1px;
  background-color: #888;
}
.guige {
  width: 100%;
  height: 85px;
  /* background-color: pink; */
}
.guige_text {
  width: 100%;
  height: 42px;
  text-align: left;
  margin-left: 10px;
  font-size: 14px;
  color: rgba(16, 16, 16, 100);
  font-family: PingFangSC-regular;
  /* background-color: green; */
}
.twogg {
  display: flex;
  margin-left: 20px;
}
.guige1 {
  width: 141px;
  height: 33px;
  line-height: 33px;
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 100);
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(164, 110, 74, 100);
}
.guige2 {
  width: 141px;
  height: 33px;
  line-height: 33px;
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 100);
  color: rgba(164, 110, 74, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  margin-left: 10px;
  border: 1px solid rgba(164, 110, 74, 100);
}
.num_text {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}
</style>
